<template>
  <div class="home"
       v-cloak>
    <hr>
    <!-- v-once 渲染组件或元素一次 ，再次渲染作为静态部分渲染，优化性能 -->
    <div v-text="msg"
         v-once></div>
    <h1>{{kkk}}</h1>
    <!-- v-pre 原样输出内容 -->
    <h1 v-pre>{{my  name is sdf }}</h1>
    <h1 v-myif="myflag">{{count|two|cheng}}</h1>
    <zi-com>
      <template v-slot:head>
        <div>
          子组件的头部
        </div>
      </template>
      <template #foot>
        <div>
          子组件的脚步
        </div>
      </template>
    </zi-com>
  </div>
</template>

<script>
import ziCom from './zi'

import mycom from '../utils/mixins'
export default {
  name: "Home",
  mixins: [mycom],
  components: {  //导入的组件   写入的组件
    ziCom
  },
  filters: { //局部过滤器
    two: function (value) { //value 过滤器前的数据
      return value.toFixed(2)
    }
  },

  directives: {//局部指令
    'myif': {
      inserted: function (el, binding) {//元素插入到dom中
        // el 代表当前指令挂载的元素
        console.log(binding)
        // binding.value  指令后传来的数据
        if (binding.value) {
          el.style.color = "red";
          // 父元素.insertBefore(要添加的元素，参照物)
          el.parentNode.insertBefore(el, el.nextElementSibling);
        } else {
          el.remove();
        }
      }
    }
  },
  data () {
    return {
      msg: "<h1>你好</h1>",
      count: 1.234234234,
      myflag: true
    }
  }
}


// new Vue({
//   el: "#app",
//   data () {
//     return {}
//   },
//   template:"",
//   computed: {},
//   methods: {

//   },
    // mixins:[],  //混入
//   watch: {},
//   filters: {},
//   directives: {},
//   component: {},//创建局部组件
//   beforeCreate () {

//   },
//   created () {

//   },
//   beforeMount () {

//   },
//   mounted () {

//   },
//   beforeUpdate () {

//   },
//   updated () {

//   },
//   beforeDestroy () {

//   },
//   destroyed () {

//   },
//   activated () {

//   },
//   deactivated () {

//   },
//   render: h => h(App),
//   router,
//   store,

// })



</script>
<style lang="less">
[v-cloak] {
  display: none;
}
</style>
